<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1">
<title>鸡血海报</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- <link rel="stylesheet" href="__ROOT__ /AI_radar/css/footer.css"> -->
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/font_my/iconfont.css">
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/lunb/swiper.min.css">
<link rel="stylesheet" href="__ROOT__ /AI_radar/css/lunb/choumei.min.css">

<script type="text/javascript" src="__ROOT__ /AI_radar/js/token.js"></script>
<style type="text/css">
	body,html{
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		color:#555555;
		background: #eee;
	}
	p{
		margin: 0;
	}
	.poster{
		width: 100%;
		height: 100%;
		/*padding: 0 10px;*/
	}
	.posterZ{
		width: 70%;
		/*height: calc(100% - 50px);*/
		margin: 20px auto;
		/*background: #fff;*/
	}
	.posterTop{
		width: 100%;
		height: 50px;
		background: #fff;
		/*border-bottom: 1px solid #ccc;*/
	}
	.posterTZ{
		/*width: 70%;
		margin: auto;
		display: flex;*/
		text-align: center;
		line-height: 50px;
		font-weight: bold;
		font-size: 18px;
	}
	.posterTL,.posterTR{
		width: 50%;
		text-align: center;
		line-height: 45px;
	}
	.fes{
		color: #1963AA;
		border-bottom: 1px solid #1963AA;
	}
	/*励志*/
	.motivationalZ{
		width: 100%;
		/*height: 100%;*/
		font-size: 0.8rem;
	}
	.motivational{
		width: 100%;
		height: calc(100% - 40px);
		border:1px solid #ccc;
		background: #fff;
		margin-top: 5px;
	}
	.motivationalTop{
		width: 100%;
		height: calc(100% - 90px);
	}
	.motivationalTop img{
		width: 100%;
		height: 100%;
	}
	.motivationalBot{
		width: calc(100% - 20px);
		height: 90px;
		padding: 10px 10px 0 10px;
		display: flex;
	}
	.motivationalBotL{
		width: calc(100% - 70px);
		height: 80px;
	}
	.motivationalBotLT{
		width: 100%;
		height: 40px;
		display: flex;
	}
	.motivationalBotLTL{
		width: 40px;
	}
	.motivationalBotLTL img{
		width: 40px;
		height: 40px;
	}
	.motivationalBotLTR{
		width: calc(100% - 50px);
		padding-left: 10px;
	}
	.motivationalP{
		line-height: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.motivationalGj{
		font-size: 0.8rem;
	}
	.motivationalN{
		font-size: 1rem;
		font-weight: bold;
	}
	.motivationalBotLB{
		margin-top: 10px;
	}
	.motivationalBotR{
		width: 70px;
	}
	.motivationalBotRImg{
		width: 50px;
		margin: auto;
	}
	.motivationalBotRImg img{
		width: 100%;
	}
	.motivationalP2{
		text-align: center;
		font-size: 10px;
	}
	.motivationalbtn{
		width: 70%;
		height:40px;
		display: flex;
		margin-top:15px;
		position:fixed;
		bottom: 0;
		left:15%;
	}
	.motivationalbtn div{
		width: 80px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
	}
	.motivationalbtnH{
		border:1px solid #4f81d4;
		background:#fff;
		color:#4f81d4;
		margin-right: calc(100% - 164px)
	}
	.motivationalbtnB{
		background: #4f81d4;
		color: #fff;
	}





	.custom{
		width: 100%;
		height: calc(100% - 60px);
		border:1px solid #ccc;
		background: #fff;
	}
	.motivationalImages{
		width: 100%;
		text-align: center;
		line-height: 50px;
		display: none;
		color: #4f81b4;
	}

	#load{
        position: fixed;
        top: 0;
        left: 0;
        background:rgba(0,0,0,0.9);
        width:100%;
        height: 100%;
        display:flex;
        vertical-align: middle;
      }
      .load1Img{
        width:100%;
        height:auto;

      }

.swiper-slide{
		position: relative;
	}
	.cang{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 15;
		background: rgba(0,0,0,0.5);
		/*color: #fff;*/
	}
	.cangs{
		width: 100%;
		height: 50px;
		color:#fff;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		margin-top: 50%;
		font-weight: bold;
		display: inline-block;
	}




</style>

</head>
<body>
	{include file="public/wx_share" /}
	<div class="poster">
		<div class="posterTop">
			<div class="posterTZ">励志
				
			</div>
		</div>
			<!--<div style="width:100%;height: calc(100% - 50px);display:flex;vertical-align: middle;">-->
			<div style="width:100%;height: calc(100% - 50px);">

				<div class="posterZ">
					<div class="motivationalZ">
						<div class="motivational">
							<div class="none">
								
								<div class="motivationalTop"><img src="__ROOT__ /AI_radar/image/my/hb.png" alt="" class="motivationalTu"></div>
								<div class="motivationalBot">
									<div class="motivationalBotL">
										<div class="motivationalBotLT">
											<div class="motivationalBotLTL"><img src="__ROOT__ /AI_radar/image/my/styleMy.jpg" alt="" class="motivationalImg"></div>
											<div class="motivationalBotLTR">
												<p class="motivationalP"><span class="motivationalN"></span> <span class="motivationalZl"></span></p>
												<div class="motivationalP motivationalGj"></div>
											</div>
										</div>
										<div class="motivationalBotLB">手机：<span class="motivationalPhone"></span></div>
									</div>
									<div class="motivationalBotR">
										<div class="motivationalBotRImg"><img src="" class="motivationalBotRImgs" alt=""></div>
										<p class="motivationalP2">长按识别二维码</p>
									</div>
								</div>
							</div>
						</div>
						<div class="motivationalbtn">
							<div class="motivationalbtnH">换一换</div>
							<div class="motivationalbtnB">保存海报</div>

						</div>
						<div class="motivationalImages">长按图片分享</div>
					</div>
				</div>
			</div>
		</div>
		
	<canvas class="canvas" style="display:none;"></canvas>

    <div class="CRM_log" style="display:block;position: fixed;top: 0;left: 0;background:rgba(0,0,0,0);width:100%;height: 100%;">
      <div style="width:100%;height:100%;display:flex;vertical-align: middle;">
        <div style="width:3rem;height:3rem;margin: auto;">
          <img src="http://resource.17jxyx.com/goods/15537572830000.gif" alt="" class="load1Img" style="width:100%;height:auto;border-radius: 0.4rem;background: rgba(255,255,255,0.3)" />
        </div>
      </div>
  	</div>
  <div class="CES" style="position:fixed;top:50%;right:0;width:20px;height:50px;border:1px solid #ccc;">测试</div>

<script src='__ROOT__ /AI_radar/js/jquery.js'></script>

<script src="__ROOT__ /AI_radar/js/my/html2canvas.js"></script>
<script type="text/javascript">










	$(".CES").click(function(){
		var name = prompt("请输入测试编码")
		if(name == "yds1514112"){
			window.location.href = window.urls.url + `/my/set?corpid=${localStorage.getItem("CRM_corpId")}&type=fodder#posters`
		}
	})










	$.ajax({
	      url:window.urls.url + "/my/oneself/info",
	      type:"POST",
	      contentType: "application/json",
	      dataType:"json",
	      data:JSON.stringify({
	        token:window.tokens.token_boss,
	      }),
	      success:function(res){
	        // console.log(res)
	        console.log(res.data)
	        $(".CRM_log").css("display","none")
	        if(res.data){
	        	if(res.data.userimg){
	        		$(".motivationalImg").attr("src",res.data.userimg.url)
	        		// document.querySelector(".motivationalImg").src = res.data.userimg.url
	        		if(localStorage.getItem("headImg")){
						document.querySelector(".motivationalImg").src = JSON.parse(localStorage.getItem("headImg")).url
	        		}else{
	        			// alert(res.data.userimg.url)


		        		getBase64(res.data.userimg.url)
			            .then(function(base64s){
		            		// alert("下载成功")
		            		// if(base64s){
		            		// 	alert("图片地址")
		            		// }
		            		$(".motivationalImg").attr("src",base64s)

			            	var obj = {
			            		id:res.data.thirdapp.img.id,
			            		url:base64s
			            	}
			            	localStorage.setItem("headImg",JSON.stringify(obj))
		            		

			            	// document.querySelector(".motivationalImg").src = base64
			                // console.log(base64);//处理成功打印在控制台
			            },function(err){
			                console.log(err);//打印异常信息
			            }); 
			        }
	        	}
	        	if(res.data.name){
	        		$(".motivationalN").html(res.data.name)
	        	}
	        	if(res.data.position){
	        		$(".motivationalZl").html(res.data.position)
	        	}
	        	if(res.data.card){
	        		if(res.data.card.phone){
	        			$(".motivationalPhone").html(res.data.card.phone);
	        		}
	        		// if(res.data.card.email){
	        		// 	$(".cardEamil").html(res.data.card.email);
	        		// }
	        		if(res.data.thirdapp.sub_name){
	        			$(".motivationalGj").html(res.data.thirdapp.sub_name);
	        		}
	        	}

	        }
	      },
	      error:function(res){
	        console.log(res)
	      }
  	})
  	if(localStorage.getItem("qrcodeImg")){
		document.querySelector(".motivationalBotRImgs").src = localStorage.getItem("qrcodeImg")
	}else{
	  	$.ajax({
		      url:window.urls.url + "/my/qrcode",
		      type:"POST",
		      contentType: "application/json",
		      dataType:"json",
		      data:JSON.stringify({
		        token:window.tokens.token_boss,
		      }),
		      success:function(res){
		        //console.log(res)
		        console.log(res.data)
		        if(res.data){
		        	// document.querySelector(".motivationalBotRImgs").src = res.data.url
        			getBase64(res.data.url)
		            .then(function(base64){
		            	localStorage.setItem("qrcodeImg",base64)
		            	document.querySelector(".motivationalBotRImgs").src = base64

		                // console.log(base64);//处理成功打印在控制台
		            },function(err){

		                console.log(err);//打印异常信息
		            });  
		        }
		      },
		      error:function(res){
		        console.log(res)
		      }
	  	})
	 }

  	// function(){
   //  　　 //这是网上的一张图片链接
   //  　　 var url="http://p1.pstatp.com/large/435d000085555bd8de10";
   //      getBase64(url)
   //          .then(function(base64){
   //                console.log(base64);//处理成功打印在控制台
   //          },function(err){
   //                console.log(err);//打印异常信息
   //          });                        
   //  }    

    //传入图片路径，返回base64
    function getBase64(img){
    	// alert("下载中")
        function getBase64Image(img,width,height) { 
        //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
          var canvas = document.querySelector(".canvas");
          canvas.width = width ? width : img.width;
          canvas.height = height ? height : img.height;
 

          var ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          var dataURL = canvas.toDataURL();
          return dataURL;
        }
        var image = new Image();
        image.crossOrigin = '';
        image.src = img;
        var deferred=$.Deferred();
        if(img){
          image.onload =function (){
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          }
          return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
        }
      }
		// $(".posterZ").load("motivational.html")

	$(".fe").click(function(){
		$(".fe1").removeClass("fes")
		$(".fe").addClass("fes")
		// $(".posterZ").load("motivational.html")
	})




	var motivationalNum = 0;
	var motivationalArr = ["__ROOT__ /AI_radar/image/my/hb.png","__ROOT__ /AI_radar/image/my/tp1.png","__ROOT__ /AI_radar/image/my/tp2.png","__ROOT__ /AI_radar/image/my/tp3.png","__ROOT__ /AI_radar/image/my/tp4.png","__ROOT__ /AI_radar/image/my/tp5.png"]
	var motivationalbtnH = document.querySelector(".motivationalbtnH")
	var motivationalTu = document.querySelector(".motivationalTu")
	var motivationalbtnB = document.querySelector(".motivationalbtnB")



	motivationalbtnH.onclick = function(){
		motivationalNum++
		if(motivationalNum>5){
			motivationalNum = 0;
		}
		motivationalArr.forEach(function(dom,index){
			if(index == motivationalNum){
				motivationalTu.src = dom;
			}
		})
	}

	motivationalbtnB.onclick = function(){
		// if(localStorage.getItem("headImg")){
		// 	// alert("已下载")
		// 	if(JSON.parse(localStorage.getItem("headImg")).url){
		// 		// alert("头像")
		// 	}
		// }
		$(".CRM_log").css("display","block")
		jQuery(document).ready(function(){

	    	var dom=$(".motivational"); //你要转变的dom
		    var width = dom.width();
		    var height = dom.height();
		    var type = "png";
		    var scaleBy = 3;  //缩放比例
		    var canvas = document.createElement('canvas');
		    var rect = dom.get(0).getBoundingClientRect(); 
		    canvas.width = width * scaleBy;
		    canvas.height = height * scaleBy;  //35是我处理完后发现短了一点，具体为什么不清楚,如果你也少的话，根据自己的项目调吧
		    canvas.style.width = width * scaleBy + 'px';
		    canvas.style.height = height * scaleBy + 'px';
		    var context = canvas.getContext('2d');
		    context.scale(scaleBy, scaleBy);
		    context.translate(-rect.left,-rect.top);
		    // 【重要】关闭抗锯齿
	        context.mozImageSmoothingEnabled = false;
	        context.webkitImageSmoothingEnabled = false;
	        context.msImageSmoothingEnabled = false;
	        context.imageSmoothingEnabled = false;

	        var img = new Image();
	        console.log(img)
	        //此处图像默认放置占位，必须真实有效存在
	        setTimeout(function(){
		        img.src='https://business.17jxyx.com/AI_radar/image/my/images.jpg';
		        img.onload = function(){
		            var elem = jQuery('.motivational');
		            html2canvas([elem.get(0)], {
		            	canvas:canvas,
		                onrendered: function (canvas) {
		                    var image = canvas.toDataURL("image/png");
		                    var pHtml = "<img src='"+image+"' style='width:100%;height:100%'>";
		                	$(".none").css("display",'none')
		                    $('.motivational').html("");
		                    jQuery(".motivational").html(pHtml);
		                    $(".CRM_log").css("display","none")
		                    // jQuery("#content").attr("style","padding-top:40px");
		                    // $("#content").append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));//这是放大了很3倍的图片
		        			// $("#content img").css("width",width+"px").css("height",height+"px");//
		                }
		            });
		        }
	        },1000)
		});
		setTimeout(function(){
			$(".motivationalbtn").css("display","none")
			$(".motivationalImages").css("display","block")

		},1000)
	}



	// $(".fe1").click(function(){
	// 	$(".fe").removeClass("fes")
	// 	$(".fe1").addClass("fes")
	// 	$(".posterZ").load("custom.html")

	// })
	// console.log($)

</script>
</body>
</html>